<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>
    <link rel="icon" href="favicon.ico">
    <!-- CSS start -->
    <link rel="stylesheet" href="icofont/style.css">
    <link rel="stylesheet" href="css/style.min.css">
    <!-- CSS over -->
    <!-- JS start -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/laydate/laydate.js"></script>
    <script src="js/scripts.js"></script>
    <!-- JS over -->
</head>


<body>
    <!-- header start -->
    <header>
        <!-- brand start -->
        <div class="brand">
            <h4 class="title">马鞍山市志业软件科技有限公司</h4>
            <p>后台管理系统</p>
        </div>
        <!-- brand start -->
        <!-- bar start -->
        <div class="header-bar">
            <!-- item start -->
            <div class="item dropdown header-list">
                <button type="button" data-toggle="dropdown">
                    <span>消息通知</span>
                    <span class="badge">3</span>
                </button>
                <div class="dropdown-menu">
                    <h6 class="dropdown-header">你有3条未读消息</h6>
                    <div class="dropdown-divider"></div>
                    <a class="item header-list-item" href="#">
                        <div class="dot blue"></div>
                        <p><b>站内通知: </b>新版后台管理系统即将上线</p>
                        <span>2017年9月1日 12:00</span>
                    </a>
                    <a class="item header-list-item" href="#">
                        <div class="dot green"></div>
                        <p><b>系统信息: </b>提交的信息审核通过</p>
                        <span>2017年9月1日 12:00</span>
                    </a>
                    <a class="item header-list-item" href="#">
                        <div class="dot red"></div>
                        <p><b>系统信息: </b>提交的信息未通过审核</p>
                        <span>2017年9月1日 12:00</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="item" href="#"><i class="icon-gear"></i>查看更多</a>
                </div>
            </div>
            <!-- item over -->
            <!-- item start -->
            <div class="item"><a href="#">技术支持</a></div>
            <!-- item over -->
            <!-- user start -->
            <div class="item dropdown header-user">
                <button type="button" data-toggle="dropdown">
                    <span class="user-name">zhouzhengrui</span>
                    <span class="user-position">前端攻城师</span>
                    <div class="avatar">
                        <img src="img/avatar.jpg" alt="">
                    </div>
                </button>
                <div class="dropdown-menu">
                    <a class="item" href="#"><i class="icon-pen"></i>编辑账号信息</a>
                    <a class="item" href="#"><i class="icon-lock"></i>修改密码</a>
                    <div class="dropdown-divider"></div>
                    <a class="item" href="page-login.html"><i class="icon-gear"></i>退出</a>
                </div>
            </div>
            <!-- user over -->
            <!-- fullscreen start -->
            <div class="item MT-hidden">
                <button type="button" id="fullscreen-view"><i class="icon-enlarge"></i></button>
                <button type="button" id="fullscreen-exit"><i class="icon-narrow"></i></button>
            </div>
            <!-- fullscreen over -->
            <!-- sidebar switch start -->
            <div class="item MT-hidden">
                <button type="button" id="modal-sidebar-button" data-toggle="modal" data-target="#modal-sidebar"><i class="icon-dot-array-y"></i></button>
            </div>
            <!-- sidebar switch over -->
            <!-- sidebar start -->
            <div class="modal fade" id="modal-sidebar">
                <div class="modal-dialog modal-stick-right">
                    <div class="modal-content">
                        <h1>右侧边栏</h1>
                    </div>
                </div>
            </div>
            <!-- sidebar over -->
        </div>
        <!-- bar over -->
        <!-- MT bar start -->
        <div class="MT-header-bar">
            <button class="MT-bar-toggler" type="button" data-toggle="collapse" data-target=".header-bar">
                <i class="icon-user"></i>
            </button>
            <button class="MT-bar-toggler" type="button" data-toggle="collapse" data-target="aside">
                <i class="icon-list"></i>
            </button>
        </div>
        <!-- MT bar over -->
    </header>
    <!-- header over -->

    <!-- aside start -->
    <aside>
        <!-- user start -->
        <div class="side-user">
            <div class="avatar">
                <img src="img/avatar.jpg" alt="">
            </div>
            <div class="info dropdown">
                <button type="button" class="user-name dropdown-toggle" data-toggle="dropdown">
                    <span>zhouzhengrui</span>
                </button>
                <span class="user-position">前端攻城师</span>
                <div class="dropdown-menu dropdown-menu-middle">
                    <a class="item" href="#">编辑账号信息</a>
                    <a class="item" href="#">修改密码</a>
                    <div class="dropdown-divider"></div>
                    <a class="item" href="page-login.html">退出</a>
                </div>
            </div>
        </div>
        <!-- user over -->
        <!-- nav start -->
        <div class="side-nav">
            <nav class="nav">
                <!-- item start -->
                <div class="item">
                    <a class="active" href="index.html" data-pjax><i class="icon-home"></i><span>首页</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-window"></i><span>演示模板 - 电子商务</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="demo-eCommerce.html" data-pjax>首页</a></div>
                        <div class="item"><a href="#" data-pjax>订单管理</a></div>
                        <div class="item"><a href="#" data-pjax>商品管理</a></div>
                    </div>
                </div>
                <!-- item over -->
                <h6 class="nav-title">页面布局</h6>
                <!-- item start -->
                <div class="item">
                    <a href="layout-templet.html" data-pjax><i class="icon-gear"></i><span>初始模板</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-gear"></i><span>主体布局</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="layout-grid.html" data-pjax>网格系统</a></div>
                        <div class="item"><a href="layout-card.html" data-pjax>卡片</a></div>
                        <div class="item"><a href="layout-tab.html" data-pjax>选项卡</a></div>
                        <div class="item"><a href="layout-collapse.html" data-pjax>折叠面板</a></div>
                        <div class="item"><a href="layout-responsive.html" data-pjax>响应式工具</a></div>
                    </div>
                </div>
                <!-- item over -->
                <h6 class="nav-title">组件</h6>
                <!-- item start -->
                <div class="item">
                    <a href="#" data-pjax><i class="icon-gear"></i><span>UI元素</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="ui-button.html" data-pjax>按钮</a></div>
                        <div class="item"><a href="ui-label.html" data-pjax>标签</a></div>
                        <div class="item"><a href="ui-icofont.html" data-pjax>字体图标</a></div>
                        <div class="item"><a href="ui-color.html" data-pjax>颜色</a></div>
                    </div>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a href="list.html" data-pjax><i class="icon-gear"></i><span>列表</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a href="table.html" data-pjax><i class="icon-gear"></i><span>表格</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-gear"></i><span>表单</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="form-layout.html" data-pjax>表单布局</a></div>
                        <div class="item"><a href="form-input.html" data-pjax>输入框</a></div>
                        <div class="item"><a href="form-select.html" data-pjax>下拉列表</a></div>
                        <div class="item"><a href="form-radiocheckbox.html" data-pjax>单选多选框</a></div>
                        <div class="item"><a href="form-upload.html" data-pjax>文件上传</a></div>
                        <div class="item"><a href="form-validate.html" data-pjax>表单验证</a></div>
                    </div>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-gear"></i><span>树</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="tree-ztree.html" data-pjax>zTree</a></div>
                        <div class="item"><a href="tree-treeview.html" data-pjax>Tree View</a></div>
                        <div class="item"><a href="tree-nestable.html" data-pjax>Nestable</a></div>
                    </div>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a href="modal.html" data-pjax><i class="icon-gear"></i><span>模态框</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a href="chart.html" data-pjax><i class="icon-gear"></i><span>数据图</span></a>
                </div>
                <!-- item over -->
                <h6 class="nav-title">其他</h6>
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-gear"></i><span>单页</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="page-login.html">登录</a></div>
                        <div class="item"><a href="page-404.html">404</a></div>
                    </div>
                </div>
                <!-- item over -->
            </nav>
        </div>
        <!-- nav over -->
        <!-- dashboard start -->
        <div class="side-dashboard MT-hidden">
            <h6 class="side-title">仪表面板</h6>
            <div class="inner">
                <div class="info">
                    <p>进度条</p>
                    <p>60%</p>
                </div>
                <div class="progress">
                    <div class="progress-bar" style="width: 60%;"></div>
                </div>
                <div class="info">
                    <p>里程碑</p>
                    <p>30%</p>
                </div>
                <div class="progress">
                    <div class="progress-bar" style="width: 30%;"></div>
                </div>
            </div>
        </div>
        <!-- dashboard over -->
    </aside>
    <!-- aside over -->

    <!-- main start -->
    <main>
        <!-- banner start -->
        <div class="banner">
            <div class="banner-title">
                <h2>首页</h2>
                <p>数据，统计，图表，最近的报告和更多</p>
            </div>
            <div class="banner-action">
                <div class="button-group">
                    <button type="button" class="button button-large">
                        <i class="icon-plus"></i>
                        <span>添加商品</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- banner over -->
        <!-- container start -->
        <div class="container-fluid">
            <!-- status start -->
            <div class="row">
                <!-- item start -->
                <div class="col-lg-3 col-md-6">
                    <div class="card card-blue">
                        <div class="card-body status">
                            <p>本期指数</p>
                            <div class="info">
                                <h1 id="status-1"></h1>
                                <small><i class="icon-bull-market"></i><span>+12%</span></small>
                            </div>
                            <i class="icon-order"></i>
                        </div>
                    </div>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="col-lg-3 col-md-6">
                    <div class="card card-green">
                        <div class="card-body status">
                            <p>上期指数</p>
                            <div class="info">
                                <h1 id="status-2"></h1>
                                <small><i class="icon-bear-market"></i><span>-8%</span></small>
                            </div>
                            <i class="icon-order-checkmark"></i>
                        </div>
                    </div>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="col-lg-3 col-md-6">
                    <div class="card card-cyan">
                        <div class="card-body status">
                            <p>数据统计</p>
                            <div class="info">
                                <h1 id="status-3"></h1>
                            </div>
                            <i class="icon-order-cancel"></i>
                        </div>
                    </div>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="col-lg-3 col-md-6">
                    <div class="card card-purple">
                        <div class="card-body status">
                            <p>金额统计</p>
                            <div class="info">
                                <h1>¥</h1>
                                <h1 id="status-4"></h1>
                            </div>
                            <i class="icon-RMB"></i>
                        </div>
                    </div>
                </div>
                <!-- item over -->
            </div>
            <!-- row over -->
            <!-- row start -->
            <div class="row">
                <!-- column start -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="title">数据图<small>基础条形图</small></h3>
                            <div class="card-header-action">
                                <button type="button" action="card-fullscreen"><i class="icon-enlarge"></i></button>
                            </div>
                        </div>
                        <div class="card-body" style="height:300px;">
                            <div class="highcharts" id="chart-3"></div>
                        </div>
                    </div>
                </div>
                <!-- column over -->
                <!-- column start -->
                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="title">数据图<small>带图例的饼图</small></h3>
                            <div class="card-header-action">
                                <button type="button" action="card-fullscreen"><i class="icon-enlarge"></i></button>
                            </div>
                        </div>
                        <div class="card-body" style="height:300px;">
                            <div class="highcharts" id="chart-4"></div>
                        </div>
                    </div>
                </div>
                <!-- column over -->
                <!-- column start -->
                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="title">数据图<small>极地面积图</small></h3>
                            <div class="card-header-action">
                                <button type="button" action="card-fullscreen"><i class="icon-enlarge"></i></button>
                            </div>
                        </div>
                        <div class="card-body" style="height:300px;">
                            <div class="highcharts" id="chart-5"></div>
                        </div>
                    </div>
                </div>
                <!-- column over -->
            </div>
            <!-- row over -->
            <!-- row start -->
            <div class="row">
                <!-- column start -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="title">表格</h3>
                            <div class="card-header-action">
                                <button type="button"><i class="icon-gear"></i><span>功能按钮</span></button>
                                <button type="button" action="card-fullscreen"><i class="icon-enlarge"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- table start -->
                            <table class="table table-responsive">
                                <thead>
                                    <tr>
                                        <th align="left">编号</th>
                                        <th align="left" colspan="2">信息组</th>
                                        <th align="left">字段</th>
                                        <th align="left">标签</th>
                                        <th align="right">相关操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th align="left">#1</th>
                                        <td style="width:70px;">
                                            <div class="image" style="background-image: url('img/avatar-zhouzhengrui.jpg');">
                                            </div>
                                        </td>
                                        <td>
                                            <h6>周正锐</h6>
                                            <p class="gray">zhouzhengrui@maszy.cn</p>
                                        </td>
                                        <td>UI设计 / 前端开发</td>
                                        <td><span class="label label-blue">前端攻城师</span></td>
                                        <td align="right">
                                            <div class="button-group">
                                                <a href="#" class="button">编辑</a>
                                                <a href="#" class="button button-green">新增</a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th align="left">#2</th>
                                        <td style="width:70px;">
                                            <div class="image" style="background-image: url('img/avatar-shulei.jpg');">
                                            </div>
                                        </td>
                                        <td>
                                            <h6>束磊</h6>
                                            <p class="gray">shulei@maszy.cn</p>
                                        </td>
                                        <td>战略决策 / 项目统筹管理</td>
                                        <td><span class="label label-green">CEO</span></td>
                                        <td align="right">
                                            <div class="button-group">
                                                <a href="#" class="button">编辑</a>
                                                <a href="#" class="button button-cyan">修改</a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th align="left">#3</th>
                                        <td style="width:70px;">
                                            <div class="image" style="background-image: url('img/avatar-jinjing.jpg');">
                                            </div>
                                        </td>
                                        <td>
                                            <h6>金晶</h6>
                                            <p class="gray">jinjing@maszy.cn</p>
                                        </td>
                                        <td>方针制定 / 战术运用</td>
                                        <td><span class="label label-purple">销售总监</span></td>
                                        <td align="right">
                                            <div class="button-group">
                                                <a href="#" class="button">编辑</a>
                                                <a href="#" class="button button-purple">查看</a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th align="left">#4</th>
                                        <td style="width:70px;">
                                            <div class="image" style="background-image: url('img/avatar-wupeijun.jpg');">
                                            </div>
                                        </td>
                                        <td>
                                            <h6>武佩俊</h6>
                                            <p class="gray">wupeijun@maszy.cn</p>
                                        </td>
                                        <td>项目实行 / 质量、安全、进度、成本管理</td>
                                        <td><span class="label label-cyan">项目经理</span></td>
                                        <td align="right">
                                            <div class="button-group">
                                                <a href="#" class="button">编辑</a>
                                                <a href="#" class="button button-red">删除</a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- table over -->
                        </div>
                    </div>
                </div>
                <!-- column over -->
            </div>
            <!-- row over -->
        </div>
        <!-- container over -->
        <!-- page script start -->
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // CountUp
                var CountUpOptions = {  
                    useEasing: true,
                    useGrouping: true,
                    separator: ',',
                    decimal: '.',
                };
                var status1 = new CountUp('status-1', 0, 128, 0, 1.5, CountUpOptions); // (元素ID, 初始值, 结束值, 小数位, 动画持续时间, 配置)
                var status2 = new CountUp('status-2', 0, 1024, 0, 1.5, CountUpOptions);
                var status3 = new CountUp('status-3', 0, 2048, 0, 1.5, CountUpOptions);
                var status4 = new CountUp('status-4', 0, 4096, 0, 1.5, CountUpOptions);
                status1.start();
                status2.start();
                status3.start();
                status4.start();
                // highcharts
                $('#chart-3').highcharts({
                    chart: {
                        type: 'column',
                    },
                    title: {
                        text: '图表名称'
                    },
                    xAxis: {
                        categories: ['一月', '二月', '三月', '四月', '五月', '六月'],
                    },
                    yAxis: {
                        title: {
                            text: null,
                        },
                    },
                    tooltip: {
                        valueSuffix: '万'
                    },
                    navigation: {
                        buttonOptions: {
                            enabled: true
                        }
                    },
                    series: [{
                        name: '2017年',
                        data: [507, 231, 635, 203, 362, 890]
                    }, {
                        name: '2016年',
                        data: [333, 156, 947, 408, 216, 790]
                    }]
                });
                $('#chart-4').highcharts({
                    chart: {
                        type: 'pie',
                    },
                    title: {
                        text: null
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    navigation: {
                        buttonOptions: {
                            enabled: true
                        }
                    },
                    series: [{
                        name: '浏览器访问量占比',
                        data: [
                            ['Firefox', 45.0],
                            ['IE', 26.8],
                            ['Chrome', 12.8],
                            ['Safari', 8.5]
                        ]
                    }]
                });
                $('#chart-5').highcharts({
                    chart: {
                        polar: true,
                        type: 'area',
                    },
                    title: {
                        text: null,
                    },
                    pane: {
                        size: '80%'
                    },
                    xAxis: {
                        categories: ['网站制作', '软件开发', '市场营销', '客户支持', '信息技术', '行政管理'],
                        gridLineWidth: 1
                    },
                    yAxis: {
                        gridLineInterpolation: 'polygon',
                        max: 10
                    },
                    legend: {
                        enabled: false
                    },
                    navigation: {
                        buttonOptions: {
                            enabled: true
                        }
                    },
                    series: [{
                        name: '能力值',
                        data: [10, 8, 8, 10, 8, 8],
                        pointPlacement: 'on'
                    }]
                });
            });
        </script>
        <!-- page script over -->
        <!-- copyright start -->
        <div class="copyright">
            <p>Powered by <a href="http://www.maszy.cn" target="_blank">© ZhiYe Software Technology Co.,Ltd</a></p>
        </div>
        <!-- copyright over -->

    </main>
    <!-- main over -->
</body>

</html>
